<template>
  <div>
    <Scroller :scrollbar-x=false lock-y >
      <div v-bind:style="{width: dataHotScrollTopWidth}" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="scrollContainer">
            <span v-for="(ScrollTopItem,index) in dataHotScrollTop" :key="ScrollTopItem.id" :class="{'mui-active':activeItem==index?true:false}" @click="changeHotTitle(ScrollTopItem.id,index)" class="mui-control-item newsListTap">{{ScrollTopItem.name}}</span>
        </div>
      </div>
    </Scroller>
    <scroller :height="scrollerHeight" lock-x scrollbar-y use-pullup  use-pulldown @on-pullup-loading="loadMore" @on-pulldown-loading="refresh" :pullup-config="pullupConfig" :pulldown-config="pulldownConfig"  ref="scroller">
      <div class="box2">
        <ul class="mui-table-view" id="hotParentNode">
          <li v-for="newsListItem in dataHotJson.newsList" :key="newsListItem.id" class="mui-table-view-cell mui-media">
            <div href="javascript:;" style="white-space: normal;">
              <img class="mui-media-object mui-pull-right" :src="dataHotJson.domainImgName + newsListItem.pic">
              <div class="mui-media-body">
                <p class="newsTitle over2">{{newsListItem.title}}</p>
                <p class="mui-ellipsis newTip">
                  <span class="mui-pull-left">{{newsListItem.news_category_name}}</span>
                  <span class="mui-pull-right">{{newsListItem.read_count}}</span>
                  <span class="mui-icon mui-icon-eye mui-pull-right"></span>
                </p>
              </div>
            </div>
          </li>
          <li class="pullup-text mui-table-view-cell" v-show="status.pullupStatus == 'nomoreData'">没有更多数据了 </li>
        </ul>
      </div>
      <!--pullup slot-->
      <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
        <span class="pullup-text" v-show="status.pullupStatus === 'default'">上拉加载更多</span>
        <span class="pullup-text" v-show="status.pullupStatus === 'down' || status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">松开进行加载</span>
        <span v-show="status.pullupStatus === 'loading'">
          <spinner type="ios-small"></spinner>
        </span>
      </div>
    </scroller>
    <!-- <group>
      <x-switch :title="pullupEnabled ? '禁用Pullup' : '启用Pullup'" :value="true" @on-change="changePullupStatus"></x-switch>
    </group>

    <divider>上拉加载重置</divider>
    <scroller lock-x scrollbar-y use-pullup height="200px" @on-pullup-loading="loadMore1" ref="scroller1">
      <div class="box2">
        <p v-for="j in n1">placeholder {{j}}</p>
      </div>
    </scroller> -->
  </div>
</template>

<script>
  import {Scroller,Divider,XSwitch,Group,Spinner} from 'vux'
  import commonJson from '../../../static/js/common';
  export default {
    data() {
      return {
        n: 10,
        n1: 10,
        pullupEnabled: true,
        scrollerHeight:'',
        dataHotScrollTopWidth:'',
        status: {
          pullupStatus: 'default',
          pulldownStatus: 'default'
        },
        activeItem:0,
        category_id:0,
        dataHotScrollTop: [{
          id:'0',
          name:'全部',
          isActive:true
        }],
        dataHotJson: {
          newsList:[],
          pageIndex:1,
          pageSize:10,
          recordCount:'',
          domainImgName:commonJson.commonData().domainImgName
        },
        pullupConfig: {
          content: '上拉加载更多',
          downContent: '松开进行加载',
          upContent: '上拉加载更多',
          loadingContent: '加载中...'
        },
        pulldownConfig: {
          content:'下拉刷新',
          downContent:'下拉刷新',
          upContent:'释放刷新',
          loadingContent:'加载中'
        }
      }    
    },
    components: {
      Scroller,
      Divider,
      XSwitch,
      Group,
      Spinner
    },
    mounted() {
      var that = this;
      that.scrollerHeight = (document.body.offsetHeight - 51) + 'px';
      that.axios.get(commonJson.commonData().domainName + '/api/zbds/news/newsList', {
          params: {
            pageSize:10,
						pageIndex:1,
						first_category_id:that.category_id
          }
        })
        .then(function (response) {
          console.log(response.data)
          if (response.data.code == 0) {
              that.dataHotJson.newsList = response.data.data.rows;
              that.dataHotJson.pageIndex = 2;
              that.dataHotJson.recordCount = response.data.data.recordCount;
          } else {

          }
        })
        .catch(function (err) {
          console.log(err);
        });
      
      that.axios.get(commonJson.commonData().domainName + '/api/zbds/news/news_category_list', {
          params: {
            
          }
        })
        .then(function (response) {
          console.log(response.data)
          if (response.data.code == 0) {
              that.dataHotScrollTop = that.dataHotScrollTop.concat(response.data.data);
              that.dataHotScrollTopWidth = (90*that.dataHotScrollTop.length) + 'px';
          } else {

          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    methods: {
      loadMore() {  //上拉加载
        var that = this;
        that.axios.get(commonJson.commonData().domainName + '/api/zbds/news/newsList', {
            params: {
              pageSize:10,
              pageIndex:that.dataHotJson.pageIndex,
              first_category_id:that.category_id
            }
          })
          .then(function (response) {
            console.log(response.data)
            if (response.data.code == 0) {
                if (that.dataHotJson.recordCount <= 10) {
                    that.dataHotJson.pageIndex++;
                    that.$refs.scroller.disablePullup();
                    that.status.pullupStatus = 'nomoreData';
                    console.log('that.status',that.status);
                } else{
                  console.log('that.dataHotJson.pageSize*that.dataHotJson.pageIndex',that.dataHotJson.pageSize*that.dataHotJson.pageIndex);
                  console.log('that.dataHotJson.recordCount',that.dataHotJson.recordCount);                 
                  if(that.dataHotJson.pageSize*that.dataHotJson.pageIndex >= that.dataHotJson.recordCount){
                      that.dataHotJson.newsList = that.dataHotJson.newsList.concat(response.data.data.rows);
                      that.dataHotJson.pageIndex++;
                      that.$refs.scroller.disablePullup();
                      that.status.pullupStatus = 'nomoreData';
                      console.log('that.status',that.status);
                  }else{
                      that.dataHotJson.pageIndex++;
                      that.dataHotJson.newsList = that.dataHotJson.newsList.concat(response.data.data.rows);
                      that.$refs.scroller.donePullup();
                  }							
                }
            } else {

            }
          })
          .catch(function (err) {
            console.log(err);
          }); 
      },
      refresh() {    //下拉刷新
        var that = this;
        that.axios.get(commonJson.commonData().domainName + '/api/zbds/news/newsList', {
            params: {
              pageSize:10,
              pageIndex:1,
              first_category_id:that.category_id
            }
          })
          .then(function (response) {
            console.log(response.data)
            if (response.data.code == 0) {
                that.status.pullupStatus = 'default';
                that.dataHotJson.newsList = response.data.data.rows;
                that.dataHotJson.pageIndex = 2;
                that.dataHotJson.recordCount = response.data.data.recordCount;
                that.$refs.scroller.donePulldown()
                that.pullupEnabled && that.$refs.scroller.enablePullup()
            } else {

            }
          })
          .catch(function (err) {
            console.log(err);
          });        
      },
      changeHotTitle(params,index) {
        console.log(params,index)
        var that = this;
        that.activeItem=index;
        that.category_id = params;
        that.axios.get(commonJson.commonData().domainName + '/api/zbds/news/newsList', {
            params: {
              pageSize:10,
              pageIndex:1,
              first_category_id:that.category_id
            }
          })
          .then(function (response) {
            console.log(response.data)
            if (response.data.code == 0) {
                that.status.pullupStatus = 'default';
                that.dataHotJson.newsList = response.data.data.rows;
                that.dataHotJson.pageIndex = 2;
                that.dataHotJson.recordCount = response.data.data.recordCount;
                that.$refs.scroller.reset({
                  top: 0
                });
                that.pullupEnabled && that.$refs.scroller.enablePullup()
            } else {

            }
          })
          .catch(function (err) {
            console.log(err);
          }); 
      }
    }
  }

</script>
<style lang="less" scoped>
  .scrollContainer{
    width: auto;
    text-align: left;
  }
  .box2-wrap {
    height: 300px;
    overflow: hidden;
  }
  .pullup-text{
    font-size: 12px;
    color: #999;
    text-align: center;
  }
  .rotate {
    display: inline-block;
    transform: rotate(-180deg);
  }
  .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
    color: #ff5001;
    border-bottom: 2px solid #ff5001;
  }
  .pullup-arrow {
    transition: all linear 0.2s;
    color: #666;
    font-size: 25px;
  }
#hotContainer .mui-table-view{
	background-color: #FFFFFF;
}
#hotContainer .mui-table-view .mui-media-body{
	white-space: normal;
	color: #666666;
}
.mui-table-view .mui-media-object{
	max-width: 20%;
	height: 65px;
}
.mui-table-view-cell .newsTitle{
	height: 45px;
	margin-bottom: 4px;
	color: #000;
}
.mui-table-view-cell .newTip span{
	font-size: 12px;
	line-height: 23px;
}
.mui-table-view-cell .newTip .mui-icon{
	font-size: 17px;
	margin-right: 5px;
	line-height: inherit;
	
}
.mui-table-view .mui-media-object{
	width: 65px;
}
.mui-table-view-cell .newTip .mui-pull-right:not(.mui-icon-eye){
	text-align: left;
	width:40px;
}
#parentNodeClass span{
	line-height: 38px;
	font-size: 14px;
}
.mui-content{
	background-color: #fff;
}
#hotContainer.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
	font-size: 14px;
    color: #ff5001;
    border-bottom: 2px solid #ff5001;	
}
#hotContainer.mui-segmented-control.mui-segmented-control-inverted .mui-control-item{
	border-bottom: 1px solid #c8c7cc;
}
.mui-table-view .mui-media-object{
	object-fit: cover;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
    padding: 0 15px;
}
</style>
